Site for HTMAA 2025
← Back to Weekly Update

Week 13 — Interface and Application Programming

Dec 3, 2025 · Localhost Interface Arduino

Writing an Interface

Tiny Server Program

This week’s focus was on building an interface between my computer and the board, and at the heart of that interface is a small server program. It is in charge of working between the hardware and whatever user interface I build, serving as a bridge between UI interaction and the hardware.

Since I need time to work on the final project, this week's time was actually quite tight. So I just want to get this quickly over with and focus on things that are expected to be time consuming. The learning process is fun though, and I can clearly sense the kind of potential this application could have to integrate functionality all together to something that is closer to consumer product.

The server program would in theory:

Making the Board Work: From Bare PCB to Talking Device

Before I could worry about user interfaces, I needed to make sure the board actually worked and could talk back to my computer. I'm using the board I made before and wrote a few simple function and had it tested. Here's the code: Board Message Program Download

Demo: Board

Through board manager, I could type command and verify that my code indeed worked.

UI and Python Program

Given the simplicity of the UI I had in mind, this simple html page took my 5 minutes to write. It is actually the script part that took most of the time.(I had ChatGPT helped me to debug)

Some Preparation Work:

Since browser cannot directly access serial port, I need a server program to handle the communication. Flask is a lightweight web framework for Python that makes it easy to build web applications quickly. So I installed Flask and pyserial via pip.
Getting the right board connection. Command: ls /dev/tty.* on MacOS terminal.
UI logic was pretty simple. ON/OFF button to toggle the LED, and the rest of the three button ask the LED to brink at pre-set frequency and length. File UI.html Download

Other than the typical debugging process I encountered, one thing that's worthy noting is if the port is being used, we cannot upload the board code via Arduino. Obviously the server needs to be closed so that others can use it. Took me a while to figure this out.Other than that, I'd say the whole development work was pretty smoooth.

Demo: Board

Works as expected! The UI could successfully control the LED on the board through the server program. Noted the terminal also logs the activities while I was clicking.
File: UI.html Downloadserver.py Download